<%--
  Created by IntelliJ IDEA.
  User: 20426
  Date: 2020/7/23
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影院票务管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/index.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/front/style/IMG/Blogo.png" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
</head>

<body>

<header class="dingbu">
    <nav>
        <a href="#" class="logo"></a>
        <ul class="navbar">
            <li style="background-color: #fff">
                <a href="${pageContext.request.contextPath}/front/index.jsp" style="color: #000;">首页</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/movie.jsp">电影</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/filmRank.jsp">排行榜</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/screening.jsp">场次安排</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/vipRecharge.jsp">会员卡</a>
            </li>
            <li style="background-color: #ef4238">
                <a href="${pageContext.request.contextPath}/front/userOrders.jsp" style="color: #fff;">个人信息</a>
            </li>
        </ul>

        <div class="sousuo">
        </div>
        <div class="denglu bian">
            <a href="#">
                <img src="${pageContext.request.contextPath}/front/style/IMG/avatar.png" alt="">
            </a>
            <span class="sanjiao"></span>
            <div>
                <a id="showStatus" href="${pageContext.request.contextPath}/front/accountLogin.jsp">登录</a>
            </div>
        </div>
    </nav>
</header>
<div style="height: 67px"></div>
<div class="content" style="margin: 55px 166px;">
    <div class="layui-tab layui-tab-brief" >
        <ul class="layui-tab-title">
            <li class="layui-this">我的订单</li>
            <li>我的退票申请</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ordersId" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">电影名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="filmName" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单状态</label>
                                    <div class="layui-input-inline">
                                        <select name="ordersStatus">
                                            <option value="">全部</option>
                                            <option value="0">未支付</option>
                                            <option value="1">已支付</option>
                                            <option value="2">已完成</option>
                                            <option value="3">已退单</option>
                                            <option value="4">已超时</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="order_search">
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <table id="orders_list" lay-filter="orders_list"></table>
                            <script type="text/html" id="table-content-list">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details"><i class="layui-icon layui-icon-edit"></i>查看详情</a>
                                {{# if(d.ordersStatus == 0){  }}
                                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="pay"><i class="layui-icon layui-icon-edit"></i>支付</a>
                                {{#  }else if(d.ordersStatus == 1){     }}
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="back"><i class="layui-icon layui-icon-edit"></i>申请退票</a>
                                {{#  }   }}
                            </script>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">退单申请号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="refundId" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">订单号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ordersId" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">退单状态</label>
                                    <div class="layui-input-inline">
                                        <select name="refundStatus">
                                            <option value="">全部</option>
                                            <option value="0">未同意</option>
                                            <option value="1">已同意</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="refund_search">
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    </button>
                                </div>

                            </div>
                        </div>

                        <div class="layui-card-body">
                            <table id="refund_list" lay-filter="refund_list"></table>
                            <script type="text/html" id="table-refund-list">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="refund_detail"><i class="layui-icon layui-icon-edit"></i>查看详情</a>
                                {{# if(d.refundStatus==0){ }}
                                    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="refund_delete"><i class="layui-icon layui-icon-edit"></i>取消申请</a>
                                {{# } }}
                            </script>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<!-- 申请退票表单填写 -->
<div class="layui-form " style="display:none;" id="refund_form" lay-filter="refund_form">
    <div class="layui-form-item">
     <h3>退票理由（可空）</h3>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">订单号</label>
        <div class="layui-input-block">
            <input disabled type="text" name="ordersId" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">退票理由(可空)</label>
        <div class="layui-input-block">
            <textarea name="refundContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-danger" lay-submit lay-filter="refund_submit">确认退票</button>
        </div>
    </div>
</div>
<!-- 申请退票表单查看 -->
<div class="layui-form " style="display:none;" id="refund_form_details" lay-filter="refund_form_details">
    <div class="layui-form-item">
        <label class="layui-form-label">退票申请号</label>
        <div class="layui-input-block">
            <input disabled type="text" name="refundId" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">订单号</label>
        <div class="layui-input-block">
            <input disabled type="text" name="ordersId" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">退单内容</label>
        <div class="layui-input-block">
            <textarea disabled placeholder="无理由" name="refundContent" class="layui-textarea"></textarea>        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">退单时间</label>
        <div class="layui-input-block">
            <input disabled type="text" name="refundTime" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">退单金额</label>
        <div class="layui-input-block">
            <input disabled type="text" name="refundPrice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['element','table','form'], function(){
        var table = layui.table,form = layui.form,$ = layui.$;
        var accountId = "${sessionScope.account.accountId}";
        if(accountId == ""){
            layer.confirm("请登录账号",function(){
                location.href="${pageContext.request.contextPath}/front/accountLogin.jsp";
            },function () {
                location.href="${pageContext.request.contextPath}/front/index.jsp";
            });
        }else{
            // 个人订单
            var cols = [[ //表头
                {field: 'ordersId', title: '订单编号', sort: true, width:180, fixed: 'left'}
                ,{field: 'auditoriumsName', title: '影厅名称', sort: true, width:102,templet:'<div>{{d.screening.auditoriums.auditoriumsName}}</div>'}
                ,{field: 'screeningStartTime', title: '场次开始时间', sort: true, width: 160,templet:'<div>{{d.screening.screeningStartTime}}</div>'}
                ,{field: 'filmName', title: '电影名称', width: 102, sort: true,templet:'<div>{{d.screening.film.filmName}}</div>'}
                ,{field: 'ordersTime', title: '下单时间', width:160, sort: true}
                ,{field: 'payPrice', title: '支付价格', sort: true, width: 102}
                ,{field: 'ordersStatus', title: '订单状态', sort: true, width: 102,templet:function(data){
                        var status = data.ordersStatus;
                        if(status == 0){
                            return "未支付";
                        }else if(status == 1){
                            return "已支付";
                        }else if(status == 2){
                            return "已完成";
                        }else if(status == 3){
                            return "已退款";
                        }else if(status == 4){
                            return "已超时";
                        }
                    }}
                ,{field: '', title: '操作', width: 200,toolbar:"#table-content-list"}
            ]];

            table.render({
                elem: '#orders_list'
                ,url: '${pageContext.request.contextPath}/front/orders' //数据接口
                ,where:{accountId:accountId}
                ,page: true //开启分页
                ,cols: cols
                ,parseData:function(res){
                    return {
                        "code": 0, //解析接口状态
                        "msg": "搜索成功", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.list, //解析数据列表
                    };
                }
            });

            form.on("submit(order_search)",function(data){
                layer.msg("正在搜索");
                var field = data.field;
                field["accountId"] = accountId;
                table.render({
                    elem: '#orders_list'
                    ,url: '${pageContext.request.contextPath}/front/orders' //数据接口
                    ,where:field
                    ,page: true //开启分页
                    ,cols: cols
                    ,parseData:function(res){
                        return {
                            "code": 0, //解析接口状态
                            "msg": "搜索成功", //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.list, //解析数据列表
                        };
                    }
                });

            });

            table.on("tool(orders_list)",function(obj){
                var data = obj.data;
                var ordersId = data.ordersId;
                if(obj.event == "details"){
                    layer.open({
                        type: 2
                        ,title:"支付"
                        ,content:"${pageContext.request.contextPath}/front/userOrdersDetails.jsp?ordersId="+ordersId
                        ,area: ['550px', '550px']
                        ,btn: ['确定', '取消']
                    });
                }
                if(obj.event == "pay"){
                    location.href="${pageContext.request.contextPath}/front/pay?ordersId="+ordersId;
                }
                if(obj.event == "back"){
                    layer.open({
                        type:1
                        ,anim: 1
                        ,title:"申请退票处理"
                        ,content:$("#refund_form")
                        ,area: ['450px', '400px']
                        ,btn: ['确定', '取消']
                    });

                    form.val("refund_form",{
                        ordersId:ordersId
                    });
                }
            });
            form.on("submit(refund_submit)",function(data){
                var field = data.field;
                // 发送ajax
                $.ajax({
                    url:"${pageContext.request.contextPath}/front/refund"
                    ,data:field
                    ,type:"post"
                    ,success:function(result,status,xhr){
                        if(result){
                            layer.confirm("申请成功",function(){
                                layer.closeAll();
                            });
                        }else{
                            layer.alert("申请失败");
                        }
                    }
                    ,error:function(){
                        layer.msg("ajax请求失败");
                    }
                });
            });








            // 退票申请
            var refundCols = [[ //表头
                {field: 'refundId', title: '退票申请号', sort: true, width:200, fixed: 'left'}
                ,{field: 'ordersId', title: '订单号', sort: true, width:200,templet:'<div>{{d.orders.ordersId}}</div>'}
                ,{field: 'refundTime', title: '申请时间', sort: true, width: 160}
                ,{field: 'refundContent', title: '内容', width: 230, sort: true}
                ,{field: 'refundPrice', title: '退款金额', width:120, sort: true}
                ,{field: '', title: '操作', width: 200,toolbar:"#table-refund-list"}
            ]];
            table.render({
                elem: '#refund_list'
                ,url: '${pageContext.request.contextPath}/front/refund' //数据接口
                ,where:{accountId:accountId}
                ,page: true //开启分页
                ,cols: refundCols
                ,parseData:function(res){
                    return {
                        "code": 0, //解析接口状态
                        "msg": "搜索成功", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.list, //解析数据列表
                    };
                }
            });
            // 退票申请表搜索
            form.on('submit(refund_search)',function(data){
                var field = data.field;
                field["accountId"]=accountId;
                layer.msg("正在搜索");
                table.render({
                    elem: '#refund_list'
                    ,url: '${pageContext.request.contextPath}/front/refund' //数据接口
                    ,where: field
                    ,page: true //开启分页
                    ,cols: refundCols
                    ,parseData:function(res){
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.list, //解析数据列表
                        };
                    }
                });
            });

            table.on("tool(refund_list)",function(obj){
                var data = obj.data;
                data["ordersId"]=data.orders.ordersId;
                if(obj.event == "refund_detail"){
                    layer.open({
                        type:1
                        ,content:$("#refund_form_details")
                        ,area: ['550px', '550px']
                        ,btn: ['确定', '取消']
                    });
                    form.val("refund_form_details",data);
                }
                if(obj.event== "refund_delete"){
                    layer.confirm("是否确认取消？",function(){
                        $.ajax({
                            type:"post"
                            ,url:"${pageContext.request.contextPath}/front/refund/"+data.refundId
                            ,data:{_method:"DELETE"}
                            ,success:function(result){
                                if(result){
                                    layer.alert("取消成功");
                                    table.render({
                                        elem: '#refund_list'
                                        ,url: '${pageContext.request.contextPath}/front/refund' //数据接口
                                        ,where:{accountId:accountId}
                                        ,page: true //开启分页
                                        ,cols: refundCols
                                        ,parseData:function(res){
                                            return {
                                                "code": 0, //解析接口状态
                                                "msg": "搜索成功", //解析提示文本
                                                "count": res.total, //解析数据长度
                                                "data": res.list, //解析数据列表
                                            };
                                        }
                                    });
                                }else{
                                    layer.alert("取消失败");
                                }
                            }
                            ,error:function(){
                                layer.msg("ajax请求失败");
                            }
                        });

                    })
                }
            });
        }



    });
</script>
<script src="${pageContext.request.contextPath}/front/style/JS/jquery-3.2.1.js" type="text/javascript"></script>

<script type="text/javascript">
    // 判断是否登录
    var account = "${sessionScope.account}";
    if(account != ""){
        $(".denglu img").prop("src","${pageContext.request.contextPath}/download/img?fileName=${sessionScope.account.accountPicture}");
        $("#showStatus").text("退出登录");
        $("#showStatus").prop("src","#");
    }
    $(document).on("click","#showStatus",function(){
        if($(this).text()=="退出登录"){
            $.ajax({
                url:"${pageContext.request.contextPath}/front/logout",
                success:function(){
                    console.log("退出成功");
                },
                error:function(){
                    console.log("退出失败");
                }
            });
        }
    })

</script>
</html>
